<template>
  <div id="filetag" @click="selectFile">
    <!-- <div class="filetag-left"><i class="el-icon-document"></i></div>
    <div>{{ fileName }}</div>
    <div class="filetag-right"><i class="el-icon-delete"></i></div> -->

    <el-row :gutter="20">
      <el-col :span="4"> <div class="filetag-left"><el-button type="text"><i class="el-icon-document"></i></el-button></div></el-col>
      <el-col :span="16"><div>{{ fileName }}</div></el-col>
      <el-col :span="4"><div class="filetag-right"><el-button type="text" @click="deleteFile"><i class="el-icon-delete"></i></el-button></div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: ["id", "fileName"],
  methods: {
    selectFile: function () {
      this.$emit("select", { id: this.id, fileName: this.fileName });
    },
    deleteFile: function () {
      this.$emit("delete", { id: this.id, fileName: this.fileName });
    },
  },
};
</script>

<style>
#filetag {
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  line-height: 50px;
  height: 50px;
  font-size: 16px;
  padding-left: 5px;
  padding-right: 20px;
  border-bottom: 1px solid #99bdff;
  border-top: 1px solid #99bdff;
  color: #1890ff;
}

#filetag:hover {
  background: #4a5056;
}
</style>